import Icon from '@/components/Icon'
import { getUser } from '@/store/acitons/profile'
import { useInitValue } from '@/utils/hooks'
import { NavBar, Input } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss'
import io, { Socket } from 'socket.io-client'
import { getToken } from '@/utils/storage'
const Chat = () => {
  const history = useHistory()
  // 1.准备数据
  const listRef = useRef<HTMLDivElement>(null)
  const [messageList, setMessageList] = useState<
    {
      type: 'robot' | 'user'
      text: string
    }[]
  >([
    // { type: 'robot', text: '亲爱的用户您好，小智同学为您服务。' },
    // { type: 'user', text: '你好' },
  ])

  // 2.获取用户信息 头像  可能刷新就没有了 所以直接发请求获取头像
  const { user } = useInitValue(getUser, 'profile')
  // 6.用于缓存 socket.io 客户端实例
  const clientRef = useRef<Socket | null>(null)
  // 3.引入io  引入token
  useEffect(() => {
    //创建客户端实例
    const client = io('http://geek.itheima.net', {
      transports: ['websocket'],
      // 在查询字符串参数中传递 token
      query: {
        token: 'Bearer ' + getToken().token,
      },
    })
    //6. 将客户端实例缓存到 ref 引用中
    clientRef.current = client
    // 4.监听连接成功的事件
    client.on('connect', () => {
      //向聊天记录添加一条记录

      // 减少依赖
      setMessageList((list) => [
        ...list,
        { type: 'robot', text: '我现在恭候着您的提问' },
      ])
    })

    //8.监听收到消息的事件
    client.on('message', (data: { msg: string; timestamp: number }) => {
      // console.log('和服务器建立连接成功')
      setMessageList((list) => [
        ...list,
        {
          type: 'robot',
          text: data.msg,
        },
      ])
    })

    // 3.1.在组件销毁时关闭 socket.io 的连接
    return () => {
      client.close()
    }
  }, [])
  // 4.给文本框双向数据绑定
  const [value, setValue] = useState('')
  //5.注册键盘事件
  const sendMessage = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.code === 'Enter') {
      clientRef.current?.emit('message', {
        msg: value,
        timestamp: Date.now(),
      })
      // 再把自己的信息 存储到list中渲染
      setMessageList([
        ...messageList,
        {
          type: 'user',
          text: value,
        },
      ])
      setValue('')
    }
  }

  // 10 滚动

  useEffect(() => {
    // const current = listRef.current!
    listRef.current!.scrollTop = listRef.current!.scrollHeight
  }, [messageList])
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar className="fixed-header" onBack={() => history.go(-1)}>
        小智同学
      </NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list" ref={listRef}>
        {messageList.map((item, index) => {
          if (item.type === 'robot') {
            return (
              <div className="chat-item" key={index}>
                <Icon type="iconbtn_xiaozhitongxue" />
                <div className="message">{item.text}</div>
              </div>
            )
          } else {
            return (
              <div className="chat-item user" key={index}>
                <img src={user.photo} alt="" />
                <div className="message">{item.text}</div>
              </div>
            )
          }
        })}

        {/* 机器人的消息 */}

        {/* 用户的消息 */}
      </div>

      {/* 底部消息输入框 */}
      <div className="input-footer">
        <Input
          className="no-border"
          placeholder="请描述您的问题"
          value={value}
          onChange={(e) => setValue(e)}
          onKeyUp={sendMessage}
        />
        <Icon type="iconbianji" />
      </div>
    </div>
  )
}

export default Chat
